<template>
    <fieldset>
      <legend>{{ isLogin ? "内容页面" : "登录页面" }}</legend>
      <div class="content" v-if="isLogin">
        <h2>列表展示</h2>
        <button @click="isLogin = false">退出</button>
        <button @click="getList">获取列表数据</button>
        <img :src="userInfo.headimgurl" width="50" />
        <label>昵称：</label>
        <a href="">{{ userInfo.nickname }}</a>
        <ul>
          <li v-for="item in lists" :key="item._id">
            <b>{{ item.name }}</b>
            <button v-has:read="permissionBtns">查看</button>
            <button v-has:edit="permissionBtns">修改</button>
            <button v-has:delete="permissionBtns">删除</button>
            <button v-has:add="permissionBtns">添加</button>
          </li>
        </ul>
      </div>
      <div class="login" v-else>
        <h2>请登录</h2>
        <label for="username">用户名：</label>
        <input type="text" id="username" v-model="username" />
        <br />
        <label for="password">密码：</label>
        <input type="text" id="password" v-model="password" />
        <br />
        <button @click="login">登录</button>
      </div>
    </fieldset>
  </template>
  
  <script>
  const loginApi = (params) => {
    return fetch("http://chst.vip/users/login", {
      method: "post",
      body: JSON.stringify(params),
      headers: {
        "content-type": "application/json",
      },
    })
      .then((res) => res.json())
      .catch((err) => err.toString());
  };
  const getListApi = () => {
    return fetch("http://chst.vip/students/getstulist?count=10", {
      method: "get",
      headers: {
        authorization: sessionStorage.getItem("user-token"),
      },
    })
      .then((res) => res.json())
      .catch((err) => err.toString());
  };
  export default {
    directives: {
      has: {
        inserted(el, binding) {
          // console.log(binding);
          let role = binding.arg;
          let userRole = binding.value;
          let hasRole = userRole.includes(role);
          if (!hasRole) {
            //禁用
            //el.disabled=true
            //删除
            el.parentNode.removeChild(el);
          }
        },
      },
    },
    data() {
      return {
        isLogin: false,
        username: "",
        password: "",
        userInfo: {},
        lists: [],
        permissionBtns: [],
      };
    },
    methods: {
      async login() {
        let res = await loginApi({
          username: this.username,
          password: this.password,
        });
        console.log(res);
        if (res.state) {
          this.isLogin = true;
          alert(res.msg);
          this.userInfo = res.userInfo;
          sessionStorage.setItem("user-token", res.token);
          this.permissionBtns = res.permission.buttons;
        } else {
          alert(res.msg);
        }
      },
      async getList() {
        let res = await getListApi();
        console.log("getList:", res);
        if (res.state) {
          this.lists = res.data;
        }
      },
    },
  };
  </script>
  <style scoped>
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  li {
    /* border: 1px solid deeppink; */
    margin: 10px;
    max-width: 500px;
  }
  </style>
  